<template>
    <div class="codeInputBox">
        <input type="text" :placeholder="placeholder" :value="modelValue" readonly/>
        <div class="keyboard wrapfix">
            <ul class="numbers wrapfix">
                <li v-for="n in 9" :key="n" @click="getData(n)">{{n}}</li>
            </ul>
            <ul class="numbers oprate wrapfix">
                <li class="lg" @click="getData(-3)">确定</li>
                <li class="lg grap" @click="getData(-2)">取消</li>
                <li style="margin-right:0" @click="getData(0)">0</li>
                <li class="cx red" @click="getData(-1)">
                    <img src="/images/cx.png" alt="">
                </li>
            </ul>
        </div>  
    </div>
</template>

<script>
import { reactive ,toRefs} from 'vue'
export default {
    props:['modelValue','placeholder'],
    setup(props,context) {
        const state = reactive({
            
        })
        const getData = num =>{
            let val = ''
            if(num==-1){ // 撤销
                val = props.modelValue.substring(0, props.modelValue.length - 1);
            }else if(num==-2){  // 清除
                val = ''
            }else if(num==-3){  // 确定
                context.emit('confirm')
            }else{
                val = props.modelValue+num
            }
            context.emit('update:modelValue', val)
        }

        return{
            ...toRefs(state),
            getData
        }
    },
}
</script>

<style lang="scss" scoped>
    .codeInputBox{
        width: 500px;
        height: 400px;
        margin: 0 auto;
        input{
            width: 100%;
            height: 90px;
            line-height: 86px;
            border: 2px solid #549dfe;
            border-radius:10px ;
            outline: none;
            font-size: 35px;
            color: #666666;
            padding: 0 22px;
        }
        .keyboard{
            padding: 32px 0 0 6px;
           .numbers{
               float: left;
               width: 305px;
               li{
                   float: left;
                   width: 80px;
                   height: 80px;
                   line-height: 80px;
                   text-align: center;
                   background: #549dfe;
                   font-size: 40px;
                   font-weight: 600;
                   color: #fff;
                   border: 0;
                   border-radius: 8px;
                   margin: 0 19px 16px 0;
                   &:hover,&:active{
                       background: #2d85f8;
                   }
                   &.lg{
                       width: 181px;
                   }
                   &.grap{
                        background: #b3b3b3;
                        &:hover,&:active{
                            background: #868585;
                        }
                   }
                   &.red{
                        background: #ff7263;
                        &:hover,&:active{
                            background: #f53d28;
                        }
                   }
                   &.cx{
                       margin-right:0;
                       float: right;
                       img{
                           display: block;
                           width: 100%;
                           height: 100%;
                       }
                   }
               }
               &.oprate{
                   width: 181px;
               }
           } 
        }
    }
</style>